<template>
    <div class="platformContainer">
        <div class="content">
            <el-descriptions title="设备报表" :colon="false">
                <template slot="extra">
                    <el-button type="primary"><i class="el-icon-download"></i>导出列表数据</el-button>
                </template>
            </el-descriptions>
            <div class="table" style="width: 99%;">
                <el-table :data="tableData" :header-cell-style="headerRowStyle2" class="tag6_table" height="8rem">
                    <el-table-column prop="date" label="报表日期" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="报表名称" align="center">
                    </el-table-column>
                    <el-table-column prop="state" label="数量" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" width="300px" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="look_info">查看</el-button>
                            <el-button type="text" size="small">下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog title="查看" :visible="look" width='60%' :before-close="close_look">
            <div class="table_card" style="width: 99%;">
                <el-table :data="device_list" :header-cell-style="headerRowStyle2" class="table1" height="7.8rem">
                    <el-table-column  width="55" label="序号">
                    </el-table-column>
                    <el-table-column prop="eliminatedStatus" label="序列号">
                    </el-table-column>
                    <el-table-column prop="state" label="设备型号">
                    </el-table-column>
                    <el-table-column prop="operate" label="用户名">
                    </el-table-column>
                    <el-table-column prop="activationLock" label="手机号">
                    </el-table-column>
                    <el-table-column prop="deviceStatus" label="激活锁">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.deviceStatus === '1'">已上锁</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="serverStatus" label="设备状态">
                        <template slot-scope="scope">
                            <el-tag type="danger" v-if="scope.row.serverStatus === '1'">正常</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="abmStatus" label="服务器状态">
                        <template slot-scope="scope">
                            <el-tag type="danger" v-if="scope.row.abmStatus === '1'">正常</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="abmStatus" label="ABM状态">
                        <template slot-scope="scope">
                            <el-tag type="danger" v-if="scope.row.abmStatus === '1'">正常</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="最后上线时间">
                    </el-table-column>
                </el-table>
                <el-pagination
                     :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="look = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

export default {
    data() {
        return {
            look: false,
            formInline: {},
            headerRowStyle2: {
                'backgroundColor': '#f8f8f9',
                'color': 'black'
            },
            tableData: [
                {
                    date: 1,
                    state: '0',
                    role: '0'
                },
                {
                    date: 2,
                    state: '1',
                    role: '1'
                }
            ]
        }
    },
    methods: {
        look_info() {
            this.look = true
        },
        close_look() {
            this.look = false
        }
    },
    // 使用
    mounted() {
        this.$nextTick(() => {
        });
    },
}
</script>
<style scoped>
.platformContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header_card {
    margin-bottom: 20px;
}

::v-deep .el-form-item {
    margin-bottom: 0 !important;
}

.content {
    padding: .25rem;
}

::v-deep .el-descriptions__header {
    justify-content: flex-start;
}

::v-deep .el-descriptions__title {
    margin-right: .25rem;
}
</style>